<template>
	<!-- 壁纸列表页 -->
	<view class="classlist">

		<view class="content">
			<navigator :url="`/pages/preview/preview?id=`+item._id" class="item" v-for="item in wallList" :id="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>

		<view class="loadingLayout" v-if="wallList.length || noData">
			<uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
		</view>

		<!-- 确保页面内容不会被设备的非矩形屏幕区域遮挡 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		getUserWallListApi,
		getWallByClassidApi
	} from '../../api/apis';

	//定义data参数
	const queryParams = {
		pageNum: 1,
		pageSize: 12,
		classid: 0,
		type: 'classid'
	}

	const wallList = ref([])
	const noData = ref(false)

	/*
	获取壁纸列表: 1.根据Classid, 2.获取用户的下载或评分壁纸列表
	*/
	async function getWallList() {
		let res = []
		if (queryParams.type === 'classid') {
			//通过classid获取壁纸列表
			res = await getWallByClassidApi(queryParams)
		} else {
			//获取用户下载或评分壁纸列表
			res = await getUserWallListApi(queryParams)
		}
		wallList.value.push(...res.data)
		// 刷到最后一页
		if (queryParams.pageSize > res.data.length) {
			noData.value = true;
		}

		uni.setStorageSync("storeWallList", wallList.value);
	}

	onLoad(async (e) => {
		uni.showLoading({
			title: '加载中'
		})
		// 获取id参数
		queryParams.classid = e.id
		queryParams.type = e.type || 'classid'
		//设置导航栏标题
		uni.setNavigationBarTitle({
			title: e.name
		})
		//获取数据
		await getWallList()
		uni.hideLoading()
	})

	onUnload(() => {
		uni.removeStorageSync("storeWallList")
	})

	//触底
	onReachBottom(() => {
		// 没有更多壁纸了
		if (noData.value) {
			return;
		}
		queryParams.pageNum++;
		getWallList();
	})

	onUnload(() => {
		uni.removeStorageSync("storeWallList")
	})
</script>

<style lang="scss" scoped>
	.classlist {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
			padding: 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>